<!-- 半成品 -->
<template>
  <div class="semiFinished">
    <div class="semiFinished_left content_box">
      <pieChart id="semiFinishedNumberChart" ref="semiFinishedNumberChart" height="40%"></pieChart>
      <tableBox class="tb" :data="numberTableData" :show-serial-number="true" :showThead="true"
        :thead-list="numberTableThead">
      </tableBox>
    </div>
    <div class="semiFinished_right content_box">
      <pieChart id="semiFinishedTypeChart" ref="semiFinishedTypeChart" height="40%"></pieChart>
      <tableBox class="tb" :data="typeTableData" :show-serial-number="true" :showThead="true"
        :thead-list="typeTableThead">
      </tableBox>
    </div>
  </div>
</template>
<script>
import headerBox from "../components/header.vue"
import tableBox from "../components/tableBox.vue"
import pieChart from "../components/pieChart.vue"

import lineBarChart from "../components/lineBarChart.vue"
import { getLevelStockCommodityTypeRate, getLevelCommodityTypeRateByCommodityTypeId, getLevelCommodityTypeTableByCommodityTypeId } from "@/api/bi/assetsAndMaterials";
export default {
  components: { headerBox, lineBarChart, tableBox, pieChart },
  data() {
    return {
      numberTableData: [],
      numberTableThead: ['', '仓库名称', '库存数量', '金额'],
      typeTableData: [],
      typeTableThead: ['', '半成品类型', '库存数量', '金额'],
    }
  },
  mounted() {
    // this.load = this.$loading({
    //   lock: true,
    //   text: '加载中...',
    //   spinner: 'el-icon-loading',
    //   background: 'rgba(0, 0, 0, 0.7)'
    // });
    this.getSemiFinishedNumberData()
    this.getSemiFinishedTypeData()
  },
  methods: {
    getSemiFinishedNumberData() {
      let chartData = [
        { value: 20, name: 'xx1' },
        { value: 20, name: 'xx2' },
        { value: 20, name: 'xx3' },
        { value: 20, name: 'xx4' },
        { value: 20, name: 'xx5' }
      ]
      let title = {
        text: '半成品仓库库存数量占比',
        left: 'center'
      }
      this.$refs.semiFinishedNumberChart.initChart(chartData, null, title, '60%')
      this.numberTableData = [
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
      ]
    },
    getSemiFinishedTypeData() {
      let chartData = [
        { value: 20, name: 'xx1' },
        { value: 20, name: 'xx2' },
        { value: 20, name: 'xx3' },
        { value: 20, name: 'xx4' },
        { value: 20, name: 'xx5' }
      ]
      let title = {
        text: '半成品类型占比',
        left: 'center'
      }
      this.$refs.semiFinishedTypeChart.initChart(chartData, null, title, '60%')

      this.typeTableData = [
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: 1 }, { val: 1 }, { val: 1 }],
      ]
    }
  }

}
</script>
<style lang="scss" scoped>
.semiFinished {
  background: #F2F4FC;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .content_box {
    background-color: rgba(255, 255, 255, 0.6);
    display: flex;
    border-radius: 6px;
    padding: 22px;
    box-sizing: border-box;
    width: 49%;
    flex-grow: 1;
    flex-direction: column;

    .tb {
      margin-top: 20px;
    }
  }

  .semiFinished_right {
    margin-left: 20px;
  }

}
</style>
